<template>
    <div id="home">
        <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
        <scroll class="content" 
            ref="scroll" 
            :probe-type="3" 
            @scroll="contentScroll"
            :pull-up-load="true"
            @pullingUp="loadMore"
        >
                <home-swiper :banners="banners"></home-swiper>
                <home-recommend-view :recommends="recommends"></home-recommend-view>
                <feature-view></feature-view>
                <tab-control :titles="['流行','新款', '精选']" class="tab-control" @tabClick="tabClick" />
                <goods-list :goods="showGoods" />
        </scroll>
        <backTop @click.native="backClick" v-show="isShowBackTop" />
        <ul>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
                        <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
                        <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
                        <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
                        <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
                        <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
                        <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
            <li>hhhhhhhhhhhhhhhhh</li>
        </ul>

    </div>
</template>

<script>
// 导入子组件
import NavBar from '../../components/common/navbar/NavBar.vue';
import HomeSwiper from "./childcomps/HomeSwiper.vue";
import HomeRecommendView from './childcomps/HomeRecommendView.vue'
import FeatureView from './childcomps/FeatureView.vue';

// 导入公共组件
import {getHomeMultidata, getHomeGoods} from '../../network/home';
import TabControl from '../../components/content/tabControl/TabControl.vue';
// import GoodsList from 'components/content/goods/GoodsList.vue'
import GoodsList from '../../components/content/goods/GoodsList.vue';
import Scroll from '../../components/common/scroll/Scroll.vue';
import BackTop from 'components/content/backTop/BackTop.vue';


export default {
    name: "Home",
    components:{
        NavBar,
        HomeSwiper,
        HomeRecommendView,
        FeatureView,
        TabControl,
        GoodsList,
        Scroll,
        BackTop,

    },
       
    data(){
        return{
            banners: [],
            recommends:[],
            goods:{
                'pop':{page: 0, list: []},
                'new':{page: 0, list: []},
                'sell':{page: 0, list: []},
            },
            currentType: 'pop',
            isShowBackTop: false
        }
    },
    computed:{
        showGoods(){
            return this.goods[this.currentType].list
        }
    },

    created(){
        this.getHomeMultidata()
        this.getHomeGoods('pop')
        this.getHomeGoods('new')
        this.getHomeGoods('sell')

        // 监听图片加载完成
        this.$bus.$on('itemImageLoad',()=>{
            this.$refs.scroll.refresh()
        })
        },
    methods: {  
        /*
            事件监听相关方法
        */
        // 
        tabClick(index){
            switch(index){
                case 0:
                    this.currentType = 'pop'
                    break
                case 1:
                    this.currentType = 'new'
                    break
                case 2:
                    this.currentType = 'sell'
                    break
            }
        },
        backClick(){
            this.$refs.scroll.scrollTo(0, 0, 500)
        },
        contentScroll(position){
            this.isShowBackTop = -position.y>1000

        },
        // 监听上拉事件
        loadMore(){
            this.getHomeGoods(this.currentType)
            this.$refs.scroll.scroll.refresh()

            
        },
        /*
           网络请求相关方法
        */
        // 请求多个数据
        getHomeMultidata() {
            getHomeMultidata().then(res =>{
            this.banners = res.data.banner;
            this.recommends = res.data.recommend.list;
            })
        },
        // 请求商品数据
        getHomeGoods(type){
            const page = this.goods[type].page + 1
            getHomeGoods(type, page).then(res =>{
                this.goods[type].list.push(...res.data.list)
                this.goods[type].page += 1;

                this.$refs.scroll.finishPullUp()
            })
        }
    }
}
    
    

</script> 

<style scoped>
#home{
    padding-top: 44px;
    height: 100vh;
    /* position: absolute; */
}

.home-nav{
    background-color:rgb(248, 157, 157);
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}

.tab-control{
    /* position: sticky; */
    top:44px;
    z-index: 999;

}

/* .content{
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    background-color: #fff;
} */

.content{
    height: calc(100% - 49px);
    overflow: hidden;
    margin-top: 0px;
}
</style>